<template>
<!-- 已审核列表 -->
<div class="home">
     用户管理
 </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive,inject } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import menuBar from '@/views/modules/admin/component/menuBar.vue'
import headPortrait from '@/views/modules/admin/component/headPortrait.vue'
const state = reactive({
    numObj:{},
    activeType:1,
    tableArr:[],
    tableLength:1,
    countDataArr:[
      {name:'文章',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'55'},
      {name:'视频',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'558'},
      {name:'简讯',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'558'},
    ],
    tableType:['已通过','已驳回'],
    activeTableType: 0 ,
  });
export default {
  name: 'downloadData',
  components: {
    // menuBar,
    // headPortrait,
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      const echarts = inject("ec");//引入
       function goPageItem(_index){

        if (_index===1) {
          router.push({name:'publishArticle'})
        }else if (_index===2) {
          router.push({name:'releaseVideos'})
        }else if (_index===3) {
          router.push({name:'releaseNewsletter'})
        }
      };
       async function getCount(){
        await _this.$request({
          url:'/api/pcWriter/information_count',
        }).then(res=>{
          if (res.code===1) {
            state.numObj = res.data
          }
        })
      }
     async function getTypeArr(){
        await _this.$request({
          url:'/api/pcWriter/classfly_list',
          data:{
            page:'1',
            pagesize:'11',
          }
        }).then(res=>{
          if (res.code==1) {
            localStorage.writeTypeArr = JSON.stringify(res.data.data)
            store.dispatch('getTypeArr',res.data.data)
            console.log( store.state.writer.typeArr);
          }else{

          }
        })
      };
      function initEchart(){
        //需要获取到element,所以是onMounted的Hook
            let myChart = echarts.init(document.getElementById("echarts"));
            // 自适应宽度
            let resizeMyChart = ()=>{
              let domBoxWidth = ctx.refs.echartItem.offsetWidth
              if (domBoxWidth < 200) {
                 document.getElementById("echarts").style.width = domBoxWidth - 5 + 'px'
                 document.getElementById("echarts").style.height = domBoxWidth - 5 + 'px'

              }else{
                  console.log(111);
                  console.dir( ctx.refs.echartsRef);
                  ctx.refs.echartsRef.style.width = '200px'
                  ctx.refs.echartsRef.style.height = '200px'
                  console.log(ctx.refs.echartsRef.style.height);
              }
            }
              resizeMyChart()
              // 绘制图表
              myChart.setOption({
                tooltip: {
                  trigger: 'item',
                },
                // 图例
                // legend: {
                //    top: '8%',
                //    left: 'center'
                // },
                   //环形中间文字
                graphic: [
                     //第一行文字
                     //内容 + 位置
                     {
                         type: 'text',
                         left: 'center',
                         top: '35%',
                         style: {
                             //value当前进度
                             text: "588",
                             textAlign: 'center',
                             fill: '#4977FC',
                             fontSize: '2.25rem',
                             // fontWeight: 'bold'
                         }
                     },
                     //第二行文字
                     {
                         type: 'text',
                         left: 'center',
                         top: '58%',
                         style: {
                             //maxValue进度条最大值
                             text: '总收益',
                             textAlign: 'center',
                             fill: '#7F7F7F',
                             fontSize: '1rem'
                         }
                     }
                 ],
                series: [
                  {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['68%', '90%'],
                    avoidLabelOverlap: false,
                    color:['#1F69FF','#FF6200','#A432FF','#665EFF'],
                    itemStyle: {
                      // borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 3 //设置相聚的间隔
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        // label: {
                        //     show: true,
                        //     fontSize: '20',
                        //     fontWeight: 'bold'
                        // }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 90, name: '可提现'},
                        {value: 88, name: '已提现'},
                        {value: 88, name: '已提现1'},
                        {value: 88, name: '已提现2'},
                    ]
                  }
                ],
              });
              myChart.resize();
              window.onresize = function () {//自适应大小
                resizeMyChart()
                myChart.resize();
              };
      }
      function changeTableType(_index){
        state.activeTableType = _index
      }
      onMounted(()=>{
        // getTypeArr()
        // getCount()
        // initEchart()

      });

      return{
        state,goPageItem,store,router,changeTableType
      }
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
}
</script>
<style lang="scss" scoped>
    @media screen and (max-width: 1000px) {
       .home{
         .content{
           width: 100% !important;
         }
       }

    }


    .home{
      display: flex;
      height: 100vh;
      .content{
        width: calc( 100vw - 15.9375rem );
        position: relative;
        // overflow-y: auto;
        // overflow-x: hidden;
        .main{
          overflow-y: auto;
          overflow-x: hidden;
          width: 100%;
          height: calc( 100vh - 85px );
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .countData{
          margin-top: 10px;
          left: 2.5%;
          height: 260px;
          width: 95%;
          display: flex;
          .countDataItem{
            &:nth-child(1){
              margin-left: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              .echartBox{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

              }
              .title{
                  align-self: flex-start;
                  font-size: 1.25rem;
              }
            }
            padding: 1.25rem;
            box-sizing: border-box;
            box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
            background-color: #fff;
            border-radius: 5px;
            margin-left: 1.25rem;
            width: 25%;
            display: flex;
            flex-direction: column;
            .name{
                font-size: 1.125rem;
                color: #386AFC;
                position: relative;
                left: 5%;
                &:before{
                  content: '';
                  position: absolute;
                  top: 12%;
                  left: -5%;
                  width: 2px;
                  height: 16px;
                  background: #386AFC;
                }
            }
            &:nth-child(3) .name{
              color: #6461FE;
               &:before{
                  content: '';
                  background: #6461FE;
                }
            }
            &:nth-child(4) .name{
              color: #9540FD;
               &:before{
                  content: '';
                  background: #9540FD;
                }
            }
            .row{
              flex: 1;
              display: flex;
              align-items: center;
              width: 100%;
              // padding: 0 20px;
              padding: 0 3%;
              &:nth-child(2) strong{
                  color: #3676FF;
              }
              div{
                flex: 1;
                display: flex;
                flex-direction: column;
                strong{
                  font-size: 1.5rem;
                  color: #FA6F1A;
                  margin-top: 5px;
                }
                span{
                  color: #666666;
                  font-size: 1rm;
                }
              }
              img{
                // height: 39px;
                // width: 80px;
                height: 2.4375rem;
                width: 5rm;
              }
            }
          }
        }

        .tableArr{
          // position: absolute;
          // top: 95px + 260px +15px;
          margin-top: 10px;
          overflow-y: auto;
          left: 2.5%;
          width: 95%;
          height: 50vh;
          min-height: 490px;
          background: #fff;
          border-radius: 10px;
          box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
          .arrItem{
              margin: 20px 30px;
              overflow-y: auto;
              height: 70%;
              .videoArr{
                height: 100%;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .videoBox{
                    flex: 0 0 25%;
                    margin-bottom: 10px;
                    margin-top: 5px;
                    height: 339px;
                    display: flex;
                    justify-content: center;
                    .videoItem{
                      box-shadow: 0px 1px 10px 0px rgba(30, 33, 37, 0.2);
                      border-radius: 4px;
                      height: 339px;
                      width: 262px;
                      margin-right: 20px;
                      box-sizing: border-box;
                      cursor: pointer;
                      .cover{
                        position: relative;
                        img{
                          width: 100%;
                          height: 178px;
                        }
                        .tag{
                          position: absolute;
                          top: 5%;
                          left: -4%;
                          width: 78px;
                          height: 28px;
                          background: #FD5782;
                          color: #fff;
                          box-shadow: 0px 1px 2px 0px #FD5782;
                          border-radius: 2px 2px 2px 0px;
                          display: grid;
                          place-items: center;
                          &::before{
                            content:'';
                            position: absolute;
                            bottom: -40%;
                            left: -26%;
                            width: 0;
                            height: 0;
                            border-right: 12px solid #CB496B;
                            border-left: 20px solid transparent;
                            border-bottom: 12px solid transparent;
                          }
                        }
                      }
                      .titleText{
                        padding: 14px;
                        color: #1C1A1D;
                        color: #1C1A1D;
                        font-weight: 600;
                        font-size: 18px;
                      }
                      .count{
                        padding: 14px;
                        color: #8A8E99;
                        span{
                          color: #8A8E99;
                          margin-right: 14px;
                          &:nth-child(2) {
                            height: 16px;
                            padding-left: 14px;
                            border-left: 3px solid #8A8E99 ;
                          }
                        }
                      }
                      .bottomInfo{
                        margin: 14px 0px;
                        padding: 0 14px;
                        border-top: 1px solid #F0F0F0;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        span{
                          color: #8A8E99;
                          &:nth-child(2) {
                            color: #FF7F00;
                          }
                        }
                      }
                    }
                }
                .tips{
                  color: #909399;
                  display: grid;
                  width: 100%;
                  height: 100%;
                  place-items: center;
                  box-shadow: 0px 1px 10px 0px rgba(30, 33, 37, 0.2);
                }

              }
          }
        }

        .tableType {
              margin: 10px 0;
              padding-left: 20px;
							width: 100%;
							height: 30px;
							font-size: 18px;
							font-weight: 400;
							color: #1C1A1D;
							background-color: transparent;
							display: flex;
							align-items: flex-end;
							.tableTitle {
								width: 10%;
                min-width: 100px;
								display: flex;
								justify-content: center;
								cursor: pointer;
							}
							.active {
								position: relative;
								&::before {
									position: absolute;
									bottom: -6px;
									content: '';
									width: 30px;
									height: 3px;
									background-color: #4977FC;
								}
							}
				 }



      }
    }
</style>
